<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <style>
      #charts {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <!-- 1. 引入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <!-- 2. 准备一个具备宽高的容器 -->
    <div id="charts"></div>

    <script>
      // 3. 获取容器DOM元素
      const cahrts = document.getElementById('cahrts')
      // 4. 调用init方法，生成echarts实例
      const myEcharts = echarts.init(charts)
      // 5. 定义图标option(决定生成怎样的图标)
      const option = {
        // 标题
        title: {
          text: '柱状图'
        },
        // x轴
        xAxis: {
          // 分段的坐标轴
          type: 'category',
          // x轴显示的内容
          data: ['食品', '数码', '服饰', '箱包']
        },
        // y轴
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            // 显示
            show: true
          },
          // 刻度
          axisTick: {
            // 显示
            show: true
          }
        },
        // 系列: 1. 决定图表的类型 2. 图表的数据
        series: {
          // 图表的类型
          type: 'bar',
          // 数据,写在data中
          data: [110, 90, 120, 150],
          // 柱形的样式，颜色
          itemStyle: {
            color: 'pink'
          }
        }
      }
      // 6. 调用实例的setOption方法渲染图表
      myEcharts.setOption(option)
    </script>
  </body>
</html>
